<template>
	<div class="diancan">
		<div class="canba">
			<div class="can">		
			<span class="ssp">点餐</span>
			<span class="ssp">评价</span>
			<span class="ssp">商家</span>
			</div>
			<div class="rx">
			<span class="rxcp">热销</span>
			<span class="xihuan">大家喜欢吃，才叫只好吃</span>
			</div>
		</div>
		<div class="retu">
			<img class="xiaotu" src="//fuss10.elemecdn.com/0/6a/05b267f338acfeb8bd682d16e836dpng.png?imageMogr/format/webp/thumbnail/26x/">
			<span>热销</span>
		</div>
		<div class="ul">
		<ul>
			<li>优惠</li>
			<li>折扣套餐</li>
			<li>折扣主食</li>
			<li>满减套餐</li>
			<li>缤纷饮品</li>
			<li>满减主食</li>
			<li>满减小食</li>
		</ul>
		</div>
		<div class="gundong">
		<router-link to="/xiangqing">
		<div class="hanbao">
			<div class="hbtu">
				<img class="hbb" src="//fuss10.elemecdn.com/0/35/e74a85992c43f42ff55c84a3d8d6apng.png?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/">
				<div class="xinpin">新品</div>
			</div>
			<div class="hbright">
				<div class="hbwen">
					<p class="sc">双层香辣鸡排堡</p>
					<p class="yl">烤面包的香气和炸鸡的香气混合，口感酥脆可口，就爱这口热辣味！主要原料: 鸡肉, 生菜, 面粉</p>
					<p class="haoping">月售1075份 好评率98%</p>
					<p class="jiaqian">￥16.9</p>
					<div class="tianjia">
						+
					</div>
				</div>
			</div>
		</div>
	</router-link>
		<div class="hanbao">
			<div class="hbtu">
				<img class="hbb" src="//fuss10.elemecdn.com/c/bd/a7678256655e2a98b215047276ebdjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/">
				<div class="xinpin1">招牌</div>
			</div>
			<div class="hbright">
				<div class="hbwen">
					<p class="sc">双层香辣鸡排堡</p>
					<p class="yl">烤面包的香气和炸鸡的香气混合，口感酥脆可口，就爱这口热辣味！主要原料: 鸡肉, 生菜, 面粉</p>
					<p class="haoping">月售1075份 好评率98%</p>
					<p class="jiaqian">￥16.9</p>
					<div class="tianjia">
						+
					</div>
				</div>
			</div>
		</div>
		<div class="hanbao">
			<div class="hbtu">
				<img class="hbb" src="//fuss10.elemecdn.com/0/ed/fa63dcc979eae6c1d5ce0e206b3e0jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/">
			</div>
			<div class="hbright">
				<div class="hbwen">
					<p class="sc">双层香辣鸡排堡</p>
					<p class="yl">烤面包的香气和炸鸡的香气混合，口感酥脆可口，就爱这口热辣味！主要原料: 鸡肉, 生菜, 面粉</p>
					<p class="haoping">月售1075份 好评率98%</p>
					<p class="jiaqian">￥16.9</p>
					<div class="tianjia">
						+
					</div>
				</div>
			</div>
		</div>
		<div class="hanbao">
			<div class="hbtu">
				<img class="hbb" src="//fuss10.elemecdn.com/1/f9/15d07d89398612f3d49153e330ea9png.png?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/">
			</div>
			<div class="hbright">
				<div class="hbwen">
					<p class="sc">双层香辣鸡排堡</p>
					<p class="yl">烤面包的香气和炸鸡的香气混合，口感酥脆可口，就爱这口热辣味！主要原料: 鸡肉, 生菜, 面粉</p>
					<p class="haoping">月售1075份 好评率98%</p>
					<p class="jiaqian">￥16.9</p>
					<div class="tianjia">
						+
					</div>
				</div>
			</div>
		</div>
		<div class="hanbao">
			<div class="hbtu">
				<img class="hbb" src="//fuss10.elemecdn.com/0/11/a8af9fbfc8fa88441aab6cc636fbcpng.png?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/">
			</div>
			<div class="hbright">
				<div class="hbwen">
					<p class="sc">双层香辣鸡排堡</p>
					<p class="yl">烤面包的香气和炸鸡的香气混合，口感酥脆可口，就爱这口热辣味！主要原料: 鸡肉, 生菜, 面粉</p>
					<p class="haoping">月售1075份 好评率98%</p>
					<p class="jiaqian">￥16.9</p>
					<div class="tianjia">
						+
					</div>
				</div>
			</div>
		</div>
		<div class="hanbao">
			<div class="hbtu">
				<img class="hbb" src="//fuss10.elemecdn.com/2/1f/e8d7f8f5d50487eeb7ef6e08301f7jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/">
			</div>
			<div class="hbright">
				<div class="hbwen">
					<p class="sc">双层香辣鸡排堡</p>
					<p class="yl">烤面包的香气和炸鸡的香气混合，口感酥脆可口，就爱这口热辣味！主要原料: 鸡肉, 生菜, 面粉</p>
					<p class="haoping">月售1075份 好评率98%</p>
					<p class="jiaqian">￥16.9</p>
					<div class="tianjia">
						+
					</div>
				</div>
			</div>
		</div>
		<div class="hanbao">
			<div class="hbtu">
				<img class="hbb" src="//fuss10.elemecdn.com/c/8f/0dbd7f76fa7a662e487fb323b9eacjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/">
			</div>
			<div class="hbright">
				<div class="hbwen">
					<p class="sc">双层香辣鸡排堡</p>
					<p class="yl">烤面包的香气和炸鸡的香气混合，口感酥脆可口，就爱这口热辣味！主要原料: 鸡肉, 生菜, 面粉</p>
					<p class="haoping">月售1075份 好评率98%</p>
					<p class="jiaqian">￥16.9</p>
					<div class="tianjia">
						+
					</div>
				</div>
			</div>
		</div>
		<div class="hanbao">
			<div class="hbtu">
				<img class="hbb" src="//fuss10.elemecdn.com/d/d9/095b2c7b66b3e2cfb213ec49f39fejpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/">
			</div>
			<div class="hbright">
				<div class="hbwen">
					<p class="sc">双层香辣鸡排堡</p>
					<p class="yl">烤面包的香气和炸鸡的香气混合，口感酥脆可口，就爱这口热辣味！主要原料: 鸡肉, 生菜, 面粉</p>
					<p class="haoping">月售1075份 好评率98%</p>
					<p class="jiaqian">￥16.9</p>
					<div class="tianjia">
						+
					</div>
				</div>
			</div>
		</div>
		</div>
	</div>
</template>


<script type="text/javascript">
	
</script>

<style type="text/css">
	.gundong{
		overflow: scroll;
		height:673px;
	}
	a{
		color:#000;
	}
	.diancan{
		overflow: hidden;
		height:700px;
	}
	.can{
		position: -webkit-sticky;
		position: sticky;
    	top: 0px;
    	z-index: 99;
	}
	.ssp{
		margin-left:65px;
	}
	.rx{
		text-align: center;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	.rxcp{
		font-weight: 700;
    	font-size: .32rem;
    	color: #666;
	}
	.xihuan{
		color: #999;
    	font-size: .266667rem;
	}
	.retu{
		margin-left:5px;
		display: inline-block;
		margin-bottom: 8px;
		/*position: fixed;*/
	}
	.xiaotu{
		height:1rem;
		width:1rem;
	}
	.ul{
		overflow: hidden;
		float:left;
		/*position: fixed;*/
	}
	ul{
		float:left;
		padding:0;
		margin:0;
	}
	li{
		list-style: none;
		width:85px;
		height:40px;
		text-align: center;
		font-size: .52rem;
    	color: #666;
    	background-color: #f8f8f8;
	}
	.hanbao{
		float:right;
		margin-bottom:20px;
	}
	.hbb{
		width:6rem;
		height:6rem;
	}
	.hbtu{
		position: relative;
		float: left;
	}
	.xinpin{
		height:17px;
		width:30px;
		font-size: .533333rem;
		color:#fff;
		text-align: center;
		background-color: #00c180;
		position: absolute;
		top:0;
		left:0;
	}
	.xinpin1{
		height:17px;
		width:30px;
		font-size: .533333rem;
		color:#fff;
		text-align: center;
		background-color: #f57751;
		position: absolute;
		top:0;
		left:0;
	}
	.hbright{
		float: right;
		margin-left: 20px;
		width:157px;
	}
	.sc{
		font-size: 16px;
		font-weight:700;
		margin:0;
		margin-bottom: 3px;
		margin-top:-3px;
	}
	.hbwen{
		float: left;
		width:100%;
	}
	.yl{
		text-overflow: ellipsis;
		overflow: hidden;
 		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: .266667rem;
    	color: #999;
    	margin:0;
		margin-bottom: 3px;
	}
	.haoping{
		font-size: .266667rem;
    	color: #999;
    	margin:0;
		margin-bottom: 3px;
	}
	.jiaqian{
		color: rgb(255, 83, 57);
		display: inline-block;
	}
	.tianjia{
		background-color: #2396ff;
		border-radius: 50%;
		width:25px;
		height:25px;
		text-align: center;
		color:#fff;
		display: inline-block;
		float:right;
		margin-top: 15px;
	}
</style>